import React, { Component, createRef } from 'react'
// 非受控组件
// 表单元素的值不受state 状态的控制,其实就是操作原生dom,获取每一个表单元素的值
// 使用ref 步骤:
// 第一步: 引入createRef这个函数
// 第二步: 要元素或组件绑定ref 属性

// 知识点 :ref
// ref 如果给原生标签绑定 则 通过 this.ref属性获取的为原生的dom节点
// ref 如果给组件绑定,则获取的是当前组件的实力对象,进而可以获取该组件实例上的数据state和 方法

import Son from './Son';
export default class Father extends Component {
    constructor() {
        super();
        this.ref1 = createRef()
        this.ref2 = createRef()
        this.ref3 = createRef()
        this.ref4 = createRef()
    }
    // ref1 = createRef();
    // ref2 = createRef()
    state = {
        username: '黑旋风-李逵',
        sex: '男'
    }
    render() {
        const { username, sex } = this.state
        return (
            <div>
                {/* 输入框 */}
                <p>
                    <input ref={this.ref1} type='text' defaultValue={username} />
                </p>
                {/* 单选框 */}
                <p>
                    <input type='radio' ref={this.ref2} defaultChecked={sex == '男'} name='sex' value='男' />男
                    <input type='radio' ref={this.ref3} defaultChecked={sex == '女'} name='sex' value='女' />女
                </p>
                {/* 引入子组件son */}
                <Son ref={this.ref4}></Son>
                <p>
                    <button onClick={this.submitFn}>提交表单</button>
                </p>
            </div>
        )
    }
    submitFn = () => {
        // console.log(document.querySelector('input').value);
        // console.log(this.ref1.current.value);
        // console.log(this.ref2.current.checked);
        // console.log(this.ref3.current.checked);
        // let sex = ''
        // if (this.ref2.current.checked) {
        //     sex = '男'
        // } else {
        //     sex = '女'
        // }
        // console.log('sex', sex);

        console.log(this.ref4.current.state.username);
    }
}
